<template>
  <div class="tem-container-index">
    <div class="tem-model" v-for="(item, index) in routers" :key="index">
      <div class="tem-model-pl">
        <div class="tem-model-font tem-model-font-reflect"> 
          <router-link :to="item.value">{{item.name}}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      routers: [
        {
          name: "goback",
          value: "goback"
        },
        {
          name: "scrollBar",
          value: "scrollBar"
        },
        {
          name: "tableBar",
          value: "tableBar"
        },
        {
          name: "menu",
          value: "menuTemplate"
        },
        {
          name: "markdown",
          value: "markdown"
        },
        {
          name: "tinymce",
          value: "tinymce"
        },
        {
          name: "echarts",
          value: "echarts"
        },
        {
          name: "导出Excel",
          value: "downExcel"
        },
        {
          name: "highLight",
          value: "searchHeight"
        },
        {
          name: "fontStyle",
          value: "fontStyle"
        },
        {
          name: "wxgd",
          value: "wxgd"
        },
        {
          name: "wxgd2",
          value: "wxgd2"
        }
      ]
    }
  }
};
</script>
<style scoped>
.tem-container-index {
  height: 100%;
  width: 100%;
  /* display: flex;
  flex-direction: row; */
}
.tem-gobacktosave {
  width: 150px;
  text-align: center;
  background: #fff;
}
.tem-meun {
  width: 150px;
  background: #fff;
  /* vertical-align:middle; */
  height: 39px;
  line-height: 39px;
  margin-top: 10px;
}
.tem-model {
  width: 251px;
  height: 129px;
  margin-left: 20px;
  margin-top: 20px;
  background-image: linear-gradient(180deg, #61c1ff 0%, #609afd 100%);
  border-radius: 6px;
  text-align: center;
  float: left;
}
.tem-model-pl {
  width: 219px;
  height: 15px;
  border-radius: 0 0 6px 6px;
  background-image: linear-gradient(0deg, #efd060 0%, #fbeea4 100%);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tem-model-font {
  font: bold 35px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica,
    Arial, Sans;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 40px #10bef3,
    0 0 70px #10bef3;
  padding-top: 50%;  
}
.tem-model-font-reflect{
  -webkit-box-reflect: below 1px linear-gradient(transparent,transparent 30%,rgba(0,0,0,.3));  
}
.tem-model-font a {
  text-decoration: none;
  color: #fff;
}
</style>
<style>
#tem-index .el-collapse-item__header {
  padding-left: 10px;
}
#tem-index .el-menu {
  border: none !important;
}
#tem-index .el-menu-item:focus,
.el-menu-item:hover {
  background: #eef1f6 !important;
}
#tem-index .el-submenu__title:focus,
.el-submenu__title:hover {
  background: #eef1f6 !important;
}
</style>
